<template>
  <div>
    <div class="list-table" style="margin-bottom: 20px;">
      <ul class="disting">
        <li style="background: linear-gradient(to right bottom, #FC6E7C 0%,#FFA185 100%);">
          <p>{{ $t('投资基金个数') }}</p>
          <span>{{ countInfo.count }}</span>
        </li>
        <li style="background: linear-gradient(to right bottom, #A46CF1 0%,#D99CFB 100%);">
          <p>{{ $t('累计认缴总额') }}{{ $t('金额单位') }}</p>
          <span>{{ moneyFormat(countInfo.subscribedTotalAmount, 'w') }}</span>
        </li>
        <li style="background: linear-gradient(to right bottom, #3D9FFD 0%,#7AD6FF 100%);">
          <p>{{ $t('累计缴款总额') }}{{ $t('金额单位') }}</p>
          <span>{{ moneyFormat(countInfo.paidTotalAmount, 'w') }}</span>
        </li>
        <li style="background: linear-gradient(to right bottom, rgb(246,194,61) 0%, rgb(247,215,135) 100%);">
          <p>{{ $t('缴款比例(%)') }}</p>
          <span>
            {{ countInfo.subscriptionRatio }}
          </span>
        </li>
      </ul>
    </div>
    <div class="list-table">
      <div class="area-header">
        <span class="area-header-title">{{ $t('缴款明细') }}</span>
      </div>
      <el-form ref="queryForm" :model="queryParams" :inline="true">
        <el-form-item :label="$t('基金简称')" prop="fundName">
          <el-input v-model="queryParams.fundName" :placeholder="$t('基金简称')" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="paymentDetails" :span-method="objectSpanMethod" border>
        <el-table-column :label="$t('基金简称')" prop="fundName" align="center" show-overflow-tooltip />
        <el-table-column :label="$t('认缴金额') + $t('金额单位')" prop="subscribedAmount" align="center">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.subscribedAmount, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('实缴金额') + $t('金额单位')" prop="fundTotalPaidScale" align="center">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.fundTotalPaidScale, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('缴款金额') + $t('金额单位')" prop="paidAmount" align="center">
          <template slot-scope="scope">
            <span class="money-text">{{ moneyFormat(scope.row.paidAmount, 'w') }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('缴款日期')" prop="paidDate" align="center">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.paidDate) }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { findPaymentDetails, findPaymentDetailsCountInfo } from '@/api/fund/lpBase/lpBase'

export default {
  data() {
    return {
      total: 0,
      queryParams: {
        id: this.$route.query.lpId,
        fundName: undefined,
        pageNum: 1,
        pageSize: 10
      },
      loading: false,
      paymentDetails: [],
      countInfo: {
        subscribedTotalAmount: 0,
        paidTotalAmount: 0,
        subscriptionRatio: 0
      }
    }
  },
  mounted() {
    findPaymentDetailsCountInfo(this.$route.query.lpId).then(response => {
      if (response.data) {
        this.countInfo = response.data
      }
    })
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      findPaymentDetails(this.queryParams).then(response => {
        this.paymentDetails = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterange = []
      this.resetForm('queryForm')
      this.queryHandle()
    },
    objectSpanMethod({ rowIndex, columnIndex }) {
      // 要合并的行下标
      if (columnIndex <= 2) {
        const spanArr = this.rowspan()
        for (let i = 0; i < spanArr.length; i++) {
          const _row = spanArr[rowIndex]
          return {
            rowspan: _row,
            colspan: 1
          }
        }
      }
    },
    rowspan() {
      // 二维数组，用于存放单元格合并规则
      const spanArr = []
      // 用于存储相同项的开始index
      let position = 0
      this.paymentDetails.forEach((item, index) => {
        if (index === 0) {
          spanArr.push(1)
          position = 0
        } else {
          if (this.paymentDetails[index].fundId === this.paymentDetails[index - 1].fundId) {
            spanArr[position] += 1 // 有相同项
            spanArr.push(0) // 名称相同后往数组里面加一项0
          } else {
            spanArr.push(1) // 同列的前后两行单元格不相同
            position = index
          }
        }
      })
      return spanArr
    }
  }
}
</script>

<style scoped>

</style>
